import Taro, { Component } from '@tarojs/taro';
import { View, Text ,Image,Label } from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from '../../model/utils/rewrite';
import './index.styl';
import Empty from '../../components/Empty';

@connect(({ tipList, index }) => ({
    ...tipList, ...index
}))
@rewriteAddMTA
export default class TipList extends Component {
    config = {
        navigationBarTitleText: 'Tips列表',
        'navigationBarBackgroundColor': '#00c365',
        'navigationBarTextStyle': 'white'
    };
    
    componentDidMount(){
        this.props.dispatch({
            type : 'tipList/init'
        });
    }
    componentDidShow() {
        const {showTips} = this.props;
        if(!showTips){
            wx.switchTab({
                url: '/pages/index/index',
            });
        }
    }

    jumpDetail(id){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : `/pages/detail/index?id=${id}`,
            }
        });
    }
    goTipDetail(id){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : `/pages/tipDetail/index?id=${id}`,
            }
        });
    }


    render() {
        const {list,showTips} = this.props;
        if(!showTips){
            return <View >功能已下线</View>;
        }
        return (
            <View className='container'>
                <Navigate
                    title='每日小知识'
                    color='white'
                    backgroundColor='#00c365'
                    backTextColor='white'
                />
                {
                    list&&list.length ? <View className='content'>

                        <View>
                            {
                                list.map(tip => (<View key={tip.month}>
                                    <View className='notice'>
                                        <View className='oil-carNumber'>{tip && tip.title}
                                            <Label onClick={this.goTipDetail.bind(this,tip.id)} data-name='查看详情' data-id={tip.id}>查看详情 >
                                            </Label>
                                        </View>
                                        <View className='oil-time'>{tip.content}</View>
                                    </View>
                                </View>))
                            }
                        </View>
                    </View>: <View className='empty'>
                        <Empty />
                    </View>
                }
                <View className='next-tip'>明日登录获得更多汽车小知识哦~</View>

                
            </View>

        );
    }
}
